import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/route/routes.dart';
import 'package:gold/route/xfg_nav.dart';
import 'package:gold/ui/login/login_view_model.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/xfg_text.dart';

/// @description: 登录页面
/// @author tangzhentao
/// @created at 19:32 2024/11/24

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion(
      value: SystemUiOverlayStyle.dark,
      child: ProviderScaffold<LoginViewModel>(
        resizeToAvoidBottomInset: false,
        backgroundColor: XfgColor.white,
        model: LoginViewModel(),
        builder: (ctx, login) => Selector<LoginViewModel, bool>(
          selector: (_, k) => k.isCodeLogin,
          builder: (_, codeLogin, __) => Column(
            children: [
              Container(
                width: XfgSize().screenWidth,
                margin: EdgeInsets.only(left: XfgSize().size26, top: XfgSize().size92),
                child: XfgText(codeLogin ? '手机号登录':'密码登录', fontSize: XfgSize().text28, color: XfgColor.text1, bold: FontWeight.bold),
              ),
              /// 手机号
              Container(
                margin: EdgeInsets.only(top: XfgSize().size26),
                width: XfgSize().size342,
                height: XfgSize().size50,
                padding: EdgeInsets.symmetric(horizontal: XfgSize().size20),
                alignment: Alignment.center,
                decoration: loginTextFieldDecoration,
                child: TextField(
                  keyboardType: TextInputType.phone,
                  style: TextStyle(fontSize:XfgSize().text16, color: XfgColor.text1),
                  maxLines: 1,
                  controller: login.phoneController,
                  focusNode: login.phoneNode,
                  onChanged: login.phoneChanged,
                  onEditingComplete: () {},
                  decoration: InputDecoration(
                      isCollapsed: true,
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.zero,
                      hintStyle: TextStyle(fontSize: XfgSize().text16, color: XfgColor.text3),
                      hintText: '请输入手机号'
                  ),
                ),
              ),
              /// 验证码
              Container(
                margin: EdgeInsets.only(top: XfgSize().size16, bottom: XfgSize().size20),
                padding: EdgeInsets.symmetric(horizontal: XfgSize().size20),
                width: XfgSize().size342,
                height: XfgSize().size50,
                decoration: loginTextFieldDecoration,
                alignment: Alignment.center,
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        style: TextStyle(fontSize: XfgSize().text16, color: XfgColor.text1),
                        maxLines: 1,
                        controller: login.codeController,
                        focusNode: login.codeNode,
                        onChanged: login.codeChanged,
                        keyboardType: codeLogin ? TextInputType.number:TextInputType.text,
                        obscureText: !codeLogin,
                        decoration: InputDecoration(
                            isCollapsed: true,
                            border: InputBorder.none,
                            contentPadding: EdgeInsets.zero,
                            hintStyle: TextStyle(fontSize: XfgSize().text16, color: XfgColor.text3),
                            hintText: codeLogin ? '请输入验证码':'请输入密码'
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(right: XfgSize().size12),
                      color: XfgColor.colorE,
                      width: XfgSize().size0_5,
                      height: XfgSize().size16,
                    ),
                    Visibility(
                      visible: codeLogin,
                      child: Builder(builder: (ctx) {
                        final click = ctx.select<LoginViewModel, bool>((value) => value.canCodeClick);
                        final second = ctx.select<LoginViewModel, int>((value) => value.codeSecond);
                        return InkWell(
                          onTap: click ? login.sendCode:null,
                          child: XfgText(
                              second == 60 ? '获取验证码':'${second}S',
                              fontSize: XfgSize().text16,
                              color: click ? (second == 60 ? XfgColor.theme:XfgColor.text3):XfgColor.theme.withValues(alpha: 0.5)
                          ),
                        );
                      }),
                    )
                  ],
                ),
              ),
              Builder(builder: (ctx) {
                final isAgree = ctx.select<LoginViewModel, bool>((value) => value.isAgree);
                return InkWell(
                  onTap: login.changeAgree,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Icon(isAgree ? Icons.radio_button_on_rounded:Icons.radio_button_off_rounded, color: isAgree ? XfgColor.theme:XfgColor.text3, size: XfgSize().size20),
                      SizedBox(width: XfgSize().size6),
                      XfgText('我已阅读并同意', fontSize: XfgSize().text16, color: XfgColor.text2, children: const [
                        TextSpan(text: '服务协议', style: TextStyle(color: XfgColor.theme)),
                        TextSpan(text: '和'),
                        TextSpan(text: '隐私政策', style: TextStyle(color: XfgColor.theme)),
                      ])
                    ],
                  ),
                );
              }),
              SizedBox(height: XfgSize().size22),
              Selector<LoginViewModel, bool>(
                  selector: (_, k) => k.canClick,
                  builder: (_, canClick,__) => TextButton(
                    onPressed: canClick? login.login:null,
                    style: ButtonStyle(
                        fixedSize: WidgetStatePropertyAll(Size(XfgSize().size342, XfgSize().size52)),
                        shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(XfgSize().size6))),
                        visualDensity: VisualDensity.compact,
                        backgroundColor: WidgetStateProperty.resolveWith((states) {
                          if (states.contains(WidgetState.disabled)) {
                            return XfgColor.theme.withValues(alpha: 0.5);
                          }
                          return XfgColor.theme;
                        })
                    ),
                    child: XfgText('立即登录', color: XfgColor.white, fontSize: XfgSize().text18),
                  )
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(XfgSize().size24, XfgSize().size20, XfgSize().size16, 0),
                child: Row(
                  children: [
                    GestureDetector(
                      onTap: login.changeCodeOrPassword,
                      child: XfgText(codeLogin ? '密码登录':'手机号登录', color: XfgColor.theme, fontSize: XfgSize().text16),
                    ),
                    const Spacer(),
                    Visibility(
                      visible: !codeLogin,
                      child: GestureDetector(
                        onTap: () {
                          login.hideKeyboard();
                          XfgNav.pushNamed(Routes.loginPassword);
                        },
                        child: XfgText('忘记密码?', color: XfgColor.text3, fontSize: XfgSize().text16),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }

}
